<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>The ONE 智能钢琴教室</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no">
    <link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/mobile.css') }}">
</head>
<!-- 学生成绩推送页 -->
<body style="background:#f0f0f0;" class='push-grade-page'>
    <div style="display:none">
        <img src="{{ url_for('static', filename='images/wx_logo.jpg') }}">
    </div>
    <div class="m-push{% if not data.has_score %} no-score{% endif %}">
         <!--如果meiyou评价则还得加个no-score类 -->
        <div class="header">
            <h3 class="title">学习成果页</h3>
        </div>
        <div class="info">
            <div class="top">
                <div>
                    <div class="agent">
                        {{ data.session.school.display_name or data.session.school.name }}
                    </div>
                    <div class="name"><span>{{data.student.name}}</span></div>
                </div>
                <div style="margin-top:12px;clear:both;">
                    <div class="teacher">
                        教师：{{ data.session.teacher.name }}
                    </div>
                    <span class="date">{{ data.session.start_at.strftime('%Y-%m-%d') }} </span>
                </div>
            </div>
            <div class="score">
                <div class="has-score{% if not data.has_score %} hidden{% endif %}">
                    <!--如果meiyou评价则还得加个hidden类 -->
                    <div class="wrap">
                        <span class="eval">本课评价</span>
                        <span class="img {{ data.remark_class }}"></span> {% if data.langlang_remark == 2 %}
                        <img src="{{ url_for('static', filename='images/langlang_zhenbang.png') }}" class="langlang"> {% elif data.langlang_remark == 1 %}
                        <img src="{{ url_for('static', filename='images/langlang_jiayou.png') }}" class="langlang"> {% endif %}
                    </div>
                    <h3 class="detail">{{ data.remark }}</h3> {% if data.langlang_remark == 2 %}
                    <div class="lang-text">{{ data.student.name }}同学，郎朗为你点赞</div>
                    {% elif data.langlang_remark == 1 %}
                    <div class="lang-text">{{ data.student.name }}同学，郎朗为你加油</div>
                    {% endif %}
                </div>
                <div class="no-score{% if data.has_score %} hidden{% endif %}" style="position:relative;padding-top:20px;">
                    <!--没有评价则去掉hidden类-->
                    <div class="eval">本课评价</div>
                    <div class="detail" style="font-size:18px;color:#666;">本节课未进行PK／小考核</div>
                </div>
            </div>
        </div>
        {% for key, lesson in data.lessons.iteritems() %} {% if lesson.has_score or lesson.detail.practice or lesson.detail.music_theory %}
        <div class="select">
            <img src="{{ url_for('static', filename='images/lesson_icon.png') }}" class="icon">
            <span class="title">{{ lesson.lesson_info.description if lesson.lesson_info.lesson_type == 'minor' else lesson.lesson_info.number }}. {{ lesson.lesson_info.name_CN }}</span>
        </div>
        <div class="section">
            <h3 class="title">进行的步骤</h3>
            <ul>
                {% if lesson.detail.music_theory %}
                <li class="list">
                    <span class="name">乐理知识</span>
                    <i class="iconfont icon-right icon-down"></i>
                    <ul class="sublists">
                        {% for entry in lesson.detail.music_theory %}
                        <li>{{ loop.index }}. {{ entry }}</li>
                        {% endfor %}
                    </ul>
                </li>
                {% endif %} {% if lesson.detail.practice %}
                <li class="list">
                    <span class="name">演奏练习</span> {# <i class="iconfont icon-right icon-down"></i> #}
                </li>
                {% endif %} {% if lesson.detail.pk %}
                <li class="list">
                    <span class="name">演奏PK</span>
                    <i class="iconfont icon-right icon-down"></i>
                    <ul class="sublists">
                        {% if 'pk_kara' in lesson.detail.pk %}
                        <li>
                            卡拉PK
                            <span class="fenshu">{{ lesson.detail.pk.pk_kara.score|int }}<span class="sub">分</span></span>
                        </li>
                        {% endif %}
                        {% if 'pk_part' in lesson.detail.pk %}
                        <li>
                            分句PK
                            <span class="fenshu">{{ lesson.detail.pk.pk_part.score|int }}<span class="sub">分</span></span>
                            {% if lesson.detail.pk.pk_part.pic_urls %}
                            <a href="{{ url_for('wechat.record_images', active_id=lesson.detail.pk.pk_part.session_activity_id) }}"><i data-modal-id="score_pic_{{ lesson.detail.pk.pk_part.id }}" class="iconfont icon-file"></i></a> {% endif %}
                        </li>
                        {% endif %}
                        {% if 'pk_full' in lesson.detail.pk %}
                        <li>
                            全曲PK
                            <span class="fenshu">{{ lesson.detail.pk.pk_full.score|int }}<span class="sub">分</span></span>
                            {% if lesson.detail.pk.pk_full.pic_urls %}
                            <a href="{{ url_for('wechat.record_images', active_id=lesson.detail.pk.pk_full.session_activity_id) }}"><i data-modal-id="score_pic_{{ lesson.detail.pk.pk_full.id }}" class="iconfont icon-file"></i></a> {% endif %}
                        </li>
                        {% endif %}
                        {% if system_version == "1" %}
                        {% if 'pk_score' in lesson.detail.pk %}
                        <li>
                            曲谱PK
                            <span class="fenshu">{{ lesson.detail.pk.pk_score.score|int }}<span class="sub">分</span></span>
                            {% if lesson.detail.pk.pk_score.pic_urls %}
                            <a href="{{ url_for('wechat.record_images', active_id=lesson.detail.pk.pk_score.session_activity_id) }}"><i data-modal-id="score_pic_{{ lesson.detail.pk.pk_score.id }}" class="iconfont icon-file"></i></a> {% endif %}
                        </li>
                        {% endif %}
                        {% if 'pk_no_led' in lesson.detail.pk %}
                        <li>
                            无灯PK
                            <span class="fenshu">{{ lesson.detail.pk.pk_no_led.score|int }}<span class="sub">分</span></span>
                            {% if lesson.detail.pk.pk_no_led.pic_urls %}
                            <a href="{{ url_for('wechat.record_images', active_id=lesson.detail.pk.pk_no_led.session_activity_id) }}"><i data-modal-id="score_pic_{{ lesson.detail.pk.pk_no_led.id }}" class="iconfont icon-file"></i></a> {% endif %}
                        </li>
                        {% endif %}
                        {% else %}
                        {% if 'pk_score_slow' in lesson.detail.pk %}
                        <li>
                            曲谱PK(慢速)
                            <span class="fenshu">{{ lesson.detail.pk.pk_score_slow.score|int }}<span class="sub">分</span></span>
                            {% if lesson.detail.pk.pk_score_slow.pic_urls %}
                            <a href="{{ url_for('wechat.record_images', active_id=lesson.detail.pk.pk_score_slow.session_activity_id) }}"><i data-modal-id="score_pic_{{ lesson.detail.pk.pk_score_slow.id }}" class="iconfont icon-file"></i></a> {% endif %}
                        </li>
                        {% endif %}
                        {% if 'pk_score_mid' in lesson.detail.pk %}
                        <li>
                            曲谱PK(中速)
                            <span class="fenshu">{{ lesson.detail.pk.pk_score_mid.score|int }}<span class="sub">分</span></span>
                            {% if lesson.detail.pk.pk_score_mid.pic_urls %}
                            <a href="{{ url_for('wechat.record_images', active_id=lesson.detail.pk.pk_score_mid.session_activity_id) }}"><i data-modal-id="score_pic_{{ lesson.detail.pk.pk_score_mid.id }}" class="iconfont icon-file"></i></a> {% endif %}
                        </li>
                        {% endif %}
                        {% if 'pk_score' in lesson.detail.pk %}
                        <li>
                            曲谱PK(原速)
                            <span class="fenshu">{{ lesson.detail.pk.pk_score.score|int }}<span class="sub">分</span></span>
                            {% if lesson.detail.pk.pk_score.pic_urls %}
                            <a href="{{ url_for('wechat.record_images', active_id=lesson.detail.pk.pk_score.session_activity_id) }}"><i data-modal-id="score_pic_{{ lesson.detail.pk.pk_score.id }}" class="iconfont icon-file"></i></a> {% endif %}
                        </li>
                        {% endif %}
                        {% endif %}
                    </ul>
                </li>
                {% endif %} {% if lesson.detail.exam %}
                <li class="list">
                    <span class="name">小考核</span>
                    <i class="iconfont icon-right icon-down"></i>
                    <ul class="sublists">
                        {% if 'test_play' in lesson.detail.exam %}
                        <li>演奏<span class="fenshu">{{ lesson.detail.exam.test_play.score|int }}<span class="sub">分</span></span>
                            {% if lesson.detail.exam.test_play.pic_urls %}
                            <a href="{{ url_for('wechat.record_images', active_id=lesson.detail.exam.test_play.session_activity_id) }}"><i data-modal-id="score_pic_{{ lesson.detail.exam.test_play.id }}" class="iconfont icon-file"></i></a>
                            {% endif %}
                        </li>
                        {# comment, use new score page
                        <div id="score_pic_{{ lesson.detail.exam.test_play.id }}" style="display:none">
                            {% for pic_url in lesson.detail.exam.test_play.pic_urls %}
                            <img src="{{ pic_url }}" style="display:block;" /> {% endfor %}
                        </div>
                        #} {% endif %} {% if 'test_music_theory' in lesson.detail.exam %}
                        <li>乐理<span class="fenshu">{{ lesson.detail.exam.test_music_theory.points_get }}/{{ lesson.detail.exam.test_music_theory.points_total }}</span></li>
                        {% endif %} {% if 'test_listen' in lesson.detail.exam %}
                        <li>听力<span class="fenshu">{{ lesson.detail.exam.test_listen.points_get }}/{{ lesson.detail.exam.test_listen.points_total }}</span></li>
                        {% endif %}
                    </ul>
                </li>
                {% endif %}
            </ul>
        </div>
        {% endif %} {% endfor %}
        <div class="footer">
            <a href="/wechat/login" class="login">登录查看更多</a>
            <span class="share">分享</span>
            <div class="title">
                <span class="left"></span>
                <span class="name">The ONE智能钢琴教室</span>
                <span class="right"></span>
            </div>
        </div>
    </div>
    <div class="m-mask">
        <img src="{{ url_for('static', filename='images/fenxiang-android.png') }}">
    </div>
    <div id="correction-pics" class="m-model-score">
    </div>
    <script type="text/javascript">
    var $ = function(query, all) {
        if (all) {
            return document.querySelectorAll(query);
        }
        return document.querySelector(query);
    };
    var parent = function(selector, ele) {
        var i = 0;
        while (ele.parentNode) {
            if (ele.classList.contains(selector)) {
                return true;
            }
            ele = ele.parentNode;
        }
        return false;
    };
    var u = navigator.userAgent;
    if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        $('.m-mask img').setAttribute('src', '/static/images/fenxiang-ios.png');
    }

    var lists = $('.list', true),
        iconfiles = $('.icon-file', true);
    for (var i = 0; i < lists.length; i++) {
        lists[i].addEventListener('click', function(e) {
            if (!parent('sublists', e.target)) {
                var icon = this.querySelector('.iconfont');
                var ele = this.querySelector('.sublists');
                var classList = icon.classList;
                classList.toggle('icon-down');
                classList.toggle('icon-up');
                if (ele) {
                    ele.classList.toggle('show');
                }
            }
        });
    }
    $('.share').addEventListener('click', function() {
        $('.m-mask').style.display = 'block';
    });
    $('.m-mask').addEventListener('click', function() {
        this.style.display = 'none';
    });
    for (var i = 0; i < iconfiles.length; i++) {
        iconfiles[i].addEventListener('click', function() {
            var id = this.getAttribute('data-modal-id');
            $('.m-model-score').innerHTML = document.getElementById(id).innerHTML;
            $('.m-model-score').style.display = 'block';
        });
    }
    $('.m-model-score').addEventListener('click', function(e) {
        $('.m-model-score').style.display = 'none';
    });

    function scaleName() {
        var name = $('.top .name').innerText;
        if (name.length > 4) {
            $('.top .name').style.fontSize = '14px';
        }
    }
    scaleName();
    </script>
</body>

</html>
